<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>html标签的分类</title>
    <style>
    div{
        width: 50px;
        height: 50px;
        background: black;
        }
    img{
        width: 200px;
        }
        a{
            width: 100px;
            height: 100px;
            background-color: aqua;
            margin-bottom: 100px;
            margin-left: 100px;

        }
    </style>
</head>
<body>
    <!-- 块标签  div p h1~h6 ul li dl dt dd
         独占一行
         能够设置宽度和高度-->
    <div>div</div>
    <p>p</p>
    <ul>
        <li>li</li>
        <li>li</li>
    </ul>
    <dl>
        <dt>dt</dt>
        <dd>dd</dd>
    </dl>
    <h4>h4</h4>
    <!-- 内敛标签
         并排显示
        不能设置宽和高 -->
        <a href="#">a</a> <span>span</span> <em>em</em> <strong>strong</strong> <i>i</i>
        <!-- 内联块
             并排显示
            能够设置  width height
            margin-top margin-bottom 无效-->
        <img src="images/2.jpg" alt="">
        <button>百度</button>
        <input type="text">


        </html>